<template>
  <div
    class="login"
    v-loading="loading"
    element-loading-text="登录中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login_logo"></div>
    <div class="login_form">
      <el-form ref="form" :model="form" label-width="70px" size="mini" class="form">
        <el-form-item prop="userName">
          <span slot="label">
            <span class="span-box">
              <img src="../assets/imgs/ic_login_name.png" />
            </span>
          </span>
          <el-input class="default" placeholder="请输入用户号码" v-model="form.userName" />
        </el-form-item>

        <el-form-item prop="passWord">
          <span slot="label">
            <span class="span-box">
              <img src="../assets/imgs/ic_login_pwd.png" />
            </span>
          </span>
          <el-input
            class="default"
            type="password"
            placeholder="请输入密码"
            v-model="form.passWord"
            show-password
          />
        </el-form-item>
      </el-form>
      <div class="button-div">
        <el-button class="button-login" type="primary" @click="handleLogin">登录</el-button>
      </div>
    </div>
    <!-- <caller-notify ref="callerNotify" /> -->
  </div>
</template>
<script>
import CallerNotify from '@/components/CallerNotify'
import { checkSupportWebrtc } from '@/utils/util'
export default {
  name: 'login',
  components: { CallerNotify },
  data() {
    return {
      form: {
        userName: '', //1004000045
        passWord: '', //123456
      },
      loading: false,
    }
  },
  methods: {
    init() {
      this.isSupporrtWebRtc()
      this.getUserNameAndPassWord()
    },
    handleLogin() {
      // sessionStorage.clear()
      const userName = this.form.userName
      const passWord = this.form.passWord
      let meetingId = this.$route.query.meeting
      if (meetingId === '' || meetingId == undefined) {
        let mId = sessionStorage.getItem('meetingId')
        if (mId == '' || mId == null) {
          return this.$message.warning('会议号不存在')
        }
        meetingId = mId
      }
      if (userName === '' || userName == undefined) {
        return this.$message.warning('请输入用户号码')
      }
      if (passWord === '' || passWord == undefined) {
        return this.$message.warning('请输入密码')
      }

      sessionStorage.setItem('userName', userName)
      sessionStorage.setItem('passWord', passWord)
      sessionStorage.setItem('meetingId', meetingId)
      // this.loading = true
      //判断是否登录成功
      // this.$refs.callerNotify.initWebrtc()
      window.initWebrtc()
    },
    //是否支持webRtc
    isSupporrtWebRtc() {
      let flag = checkSupportWebrtc()
      if (!flag) {
        this.$message.error({
          showClose: true,
          message: '当前浏览器不支持WebRTC,请使用谷歌/火狐浏览器',
          duration: 0,
          type: 'warning',
          offset: 200,
        })
      }
    },
    //记录账户密码
    getUserNameAndPassWord() {
      // sessionStorage.clear()
      const userName = localStorage.getItem('userName')
      const passWord = localStorage.getItem('passWord')
      if (userName && passWord) {
        this.form.userName = userName
        this.form.passWord = passWord
      }
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style  lang="scss" scope>
/*手机*/
.login {
  height: 100%;
  width: 100%;
  .login_logo {
    height: 50%;
    width: 100%;
    background-image: url('~@/assets/imgs/ic_login_logo.png');
    background-size: 100% 100%;
  }
  .login_form {
    height: 50%;
    width: 100%;
    .form {
      padding: 20px;
      .span-box {
        img {
          line-height: 30px;
          width: 25px;
          height: 25px;
        }
      }
      .default {
        width: 90%;
      }
    }
    .button-div {
      padding: 0 20px;
      text-align: center;
      .button-login {
        width: 80%;
      }
    }
  }
}
/*ipad*/
@media screen and (min-device-width: 415px) and (max-device-width: 1024px) {
  .login {
    width: 50%;
    margin: 0 auto;
  }
}
/*pc总体*/
@media screen and (min-device-width: 1025px) {
  .login {
    width: 30%;
    margin: 0 auto;
  }
}
</style>
